<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form>
            <el-form-item label="镜像翻转">
                <div style="clear: both;">
                    <el-checkbox v-model="curComponent.propValue.flip.horizontal" label="horizontal">水平翻转</el-checkbox>
                    <el-checkbox v-model="curComponent.propValue.flip.vertical" label="vertical">垂直翻转</el-checkbox>
                </div>
            </el-form-item>
            <el-form-item label="图形定义">
                <el-input v-model="curComponent.propValue.url" type="textarea" :rows="3" />
                <el-button @click="handleSelectFile" >选择文件</el-button>
            </el-form-item>
        </el-form>
        <DlgBackPicFile :dialogVisible="dlgvisible" :config-new-file="false" @res-file="handleResFile"></DlgBackPicFile>

    </div>
</template>

<script>
import CommonAttr from '@/custom-component/common/CommonAttr.vue'

import DlgBackPicFile from "@/draw/drwfile/DlgBackPicFile.vue";


export default {
    components: { CommonAttr, DlgBackPicFile },

    data(){
    return{
      dlgvisible: false,  
    }
  },
    
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
    },

    methods:{
        handleSelectFile( ){
            this.dlgvisible = true 
        },  

        handleResFile( code, res  ){
            if( code === 0 ) {
                this.dlgvisible = false 
                return
            }

            if ( res.dir === "/" )
                this.curComponent.propValue.url = "images" + res.dir + res.filename
            else
                this.curComponent.propValue.url = "images" + res.dir + "/" + res.filename
            this.dlgvisible = false 
            
        },        
    }
}
</script>
